.light-Style {
  --vs-bg-color: #fff;
  --vs-color: #3C3C3C;
  --vs-scrollbar-track-bg-color: #EFEFEF;
  --vs-scrollbar-thumb-bg-color: #65C7F8;
}

// 这里定义仿真风格css变量
.dark-Style {
  color-scheme: dark;
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-color-primary: #30e2e9;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #234561;
  --el-color-primary-dark-2: #337ecc;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #b88230;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #c45656;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #f89898;
  --el-color-error-light-5: #fab6b6;
  --el-color-error-light-7: #fcd3d3;
  --el-color-error-light-8: #fde2e2;
  --el-color-error-light-9: #fef0f0;
  --el-color-error-dark-2: #c45656;
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;
  --el-color-info-dark-2: #73767a;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #091a2d;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #ADC5D9;
  --el-text-color-secondary: #00f0ff;
  --el-text-color-placeholder: #848C96;
  --el-text-color-disabled: #c0c4cc;
  --el-border-color: #588ba8;
  --el-border-color-light: #588ba8;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;
  --el-fill-color: #f0f2f5;
  --el-fill-color-light: #091a2d;
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fafcff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: #0d263a;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12),
    0px 8px 16px -8px rgba(0, 0, 0, 0.16);
  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);
  --el-overlay-color: rgba(0, 0, 0, 0.8);
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
  --el-mask-color: rgba(13, 38, 58, 0.9);
  --el-mask-color-extra-light: rgba(13, 38, 58, 0.3);
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
  --el-svg-monochrome-grey: var(--el-border-color);

  --vs-bg-color: #0d263a;
  --vs-color: #00f7ff;
  --vs-scrollbar-track-bg-color: #1a405f;
  --vs-scrollbar-thumb-bg-color: #00f0ff;
}
// 分开写，不要嵌套，不然前端从f12里面复制规则粘贴会丢失嵌套的样式
.dark-Style .el-button {
  --el-button-bg-color: #234561;
  --el-border-color: transparent;
  --el-button-hover-border-color: transparent;
  --el-button-active-border-color: transparent;
  --el-button-active-text-color: #fff;
  --el-button-hover-bg-color: #234561;
  --el-button-hover-text-color: #fff;
}
.dark-Style .el-button--primary {
  --el-button-bg-color: #1fb9c4;
  --el-button-hover-bg-color: #50cad2;
}

.dark-Style {
  .el-checkbox__input.is-checked,
  .el-checkbox__input.is-indeterminate {
    .el-checkbox__inner {
      --el-checkbox-checked-icon-color: #103a4d;
    }
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    --el-fill-color-light: #102e4f;
  }
  .el-date-picker {
    --el-datepicker-icon-color: #adc5d9;
  }
  .el-tag.el-tag--info{
    --el-tag-bg-color: #201e1d;
    --el-tag-text-color: #98cae6;
    --el-tag-hover-color: #064559;
  }
  .el-select__tags .el-tag--info{
    --el-fill-color: #201e1d;
  }
}

.real-Style {
  color-scheme: real;
  --el-color-white: #eeeeee;
  --el-color-black: #000000;
  --el-color-primary: #eeeeee;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #18273e;
  --el-color-primary-dark-2: #337ecc;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #b88230;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #c45656;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #f89898;
  --el-color-error-light-5: #fab6b6;
  --el-color-error-light-7: #fcd3d3;
  --el-color-error-light-8: #fde2e2;
  --el-color-error-light-9: #fef0f0;
  --el-color-error-dark-2: #c45656;
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;
  --el-color-info-dark-2: #73767a;
  --el-bg-color: #232323;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #232323;
  --el-text-color-primary: #eeeeee;
    --el-text-color-regular: #D8D8D8;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #676767;
  --el-text-color-disabled: #c0c4cc;
  --el-border-color: #676767;
  --el-border-color-light: #5a5a5a;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;
  --el-fill-color: #191919;
  --el-fill-color-light: #191919;
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fafcff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: #191919;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
  --el-box-shadow-light: 0px 0px 12px rgba(37, 20, 20, 0.12);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12),
    0px 8px 16px -8px rgba(0, 0, 0, 0.16);
  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);
  --el-overlay-color: rgba(0, 0, 0, 0.8);
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
  --el-mask-color: rgba(35, 35, 35, 0.9);
  --el-mask-color-extra-light: rgba(35, 35, 35, 0.3);
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
  --el-svg-monochrome-grey: var(--el-border-color);
  --vs-bg-color: #232323;
  --vs-color: #eee;
  --vs-scrollbar-track-bg-color: #191919;
    --vs-scrollbar-thumb-bg-color: #4E4E4E;
}

// 分开写，不要嵌套，不然前端从f12里面复制规则粘贴会丢失嵌套的样式
.real-Style .el-button {
  --el-button-bg-color: #323232;
  --el-border-color: #676767;
  --el-button-hover-border-color: #676767;
  --el-button-active-border-color: #676767;
  --el-button-active-text-color: #eee;
  --el-button-hover-bg-color: #606266;
  --el-button-hover-text-color: #eee;
}
.real-Style .el-button--primary {
  --el-button-hover-border-color: var(--el-button-border-color);
  --el-button-active-border-color: var(--el-button-border-color);
  --el-button-bg-color: #2088D7;
  --el-button-hover-bg-color: #2088D7;
  --el-button-border-color: #404040;
}

.real-Style.el-popper {
  --el-bg-color: #eee;
  --el-text-color-primary: #2088d7;
}

.real-Style .el-date-picker {
  --el-color-primary: #2088d7;
  --el-datepicker-icon-color: #eee;
}

.real-Style .el-tree {
  --el-tree-node-hover-bg-color: #18273e;
}

.real-Style .el-radio__input {
  --el-color-primary: #409eff;
}

.real-Style {
  .el-checkbox {
    --el-checkbox-input-border-color-hover: #2088d7;
  }
  .el-checkbox__input.is-checked,
  .el-checkbox__input.is-indeterminate {
    .el-checkbox__inner {
      --el-checkbox-checked-bg-color: #2088d7;
      --el-checkbox-checked-icon-color: #232323;
      --el-checkbox-checked-input-border-color: #232323;
    }
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    --el-fill-color-light: #18273e;
  }
  .el-select .el-input__wrapper {
    --el-select-input-focus-border-color: #8d8d8d;
  }
}
